import 'package:flutter/material.dart';
import 'package:islandingclub/utils/extensions.dart';
import 'package:islandingclub/utils/screen_utils.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  final List<Color> _colors = [
    Colors.red,
    Colors.orange,
    Colors.yellow,
    Colors.green,
    Colors.cyan,
    Colors.blue,
    Colors.purple
  ];
  PageController _pageController;

  AnimationController _animaitonController;
  Animation<double> _padding;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 0, viewportFraction: 0.9);

    _animaitonController =
        AnimationController(duration: Duration(milliseconds: 500), vsync: this);
    _padding = Tween(begin: 74.0, end: 90.0).animate(
      CurvedAnimation(parent: _animaitonController, curve: Curves.ease),
    );
    _animaitonController.forward();
  }

  @override
  void dispose() {
    super.dispose();
    _animaitonController?.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _buildTitleView(),
        _buildPageView(),
      ],
    );
  }

  Widget _buildTitleView() {
    return Padding(
      padding: EdgeInsets.fromLTRB(
          24.w, ScreenUtils.statusBarHeight + 52.w, 24.w, 44.w),
      child: Row(
        children: [
          Text(
            '18',
            style: TextStyle(
              fontSize: 48.sp,
              color: Colors.black54,
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 12.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text(
                      "周三",
                      style: TextStyle(
                        fontSize: 14.sp,
                        color: Colors.black54,
                      ),
                    )
                  ],
                ),
                Text(
                  "九月十二",
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: Colors.black54,
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _buildPageView() {
    return Expanded(
      child: AnimatedBuilder(
        animation: _animaitonController,
        builder: (context, child) => Padding(
          padding: EdgeInsets.only(bottom: _padding.value.w),
          child: PageView.builder(
            itemCount: _colors.length,
            itemBuilder: (BuildContext context, int index) =>
                _buildPageViewItem(index % _colors.length),
            scrollDirection: Axis.horizontal,
            reverse: false,
            physics: BouncingScrollPhysics(),
            controller: _pageController,
            onPageChanged: (int index) {},
          ),
        ),
      ),
    );

    // return AnimatedBuilder(
    //   animation: _animaitonController,
    //   builder: (context, child) => Expanded(
    //     child: Padding(
    //       padding: EdgeInsets.only(bottom: _padding.value.w),
    //       child: PageView.builder(
    //         itemCount: _colors.length,
    //         itemBuilder: (BuildContext context, int index) =>
    //             _buildPageViewItem(index % _colors.length),
    //         scrollDirection: Axis.horizontal,
    //         reverse: false,
    //         physics: BouncingScrollPhysics(),
    //         controller: _pageController,
    //         onPageChanged: (int index) {},
    //       ),
    //     ),
    //   ),
    // );
  }

  Widget _buildPageViewItem(int index) {
    var header = Expanded(
      child: Align(
        alignment: Alignment.topRight,
        child: Padding(
          padding: EdgeInsets.only(right: 14.w),
          child: Text(
            "宜\n起\n航",
            style: TextStyle(
              fontSize: 26.sp,
              color: Colors.black,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),
    );

    var content = Stack(
      children: [
        Text(
          '我来自一个平凡的世界\n却想拥有一段不平凡的人生辉煌\n自从我诞生的那一天起\n成功的航海图已经在我的内心',
          style: TextStyle(
            fontSize: 16.sp,
            color: Colors.black54,
          ),
        ),
        Container(
          width: double.infinity,
          height: 48.w,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.white,
                Colors.white60,
              ],
              begin: Alignment.bottomCenter,
              end: Alignment.topCenter,
            ),
          ),
        )
      ],
      alignment: Alignment.bottomLeft,
    );

    var footer = Padding(
      padding: EdgeInsets.only(top: 12.w),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            "106 喜欢",
            style: TextStyle(
              fontSize: 12.sp,
              color: Colors.black54,
            ),
          ),
          Text(
            " . 74 想法",
            style: TextStyle(
              fontSize: 12.sp,
              color: Colors.black54,
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.centerRight,
              child: FlatButton(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                minWidth: 64.w,
                height: 30.w,
                color: Colors.brown,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.w),
                ),
                child: Text(
                  '阅读',
                  style: TextStyle(fontSize: 15.sp, color: Colors.white),
                ),
                onPressed: () {},
              ),
            ),
          )
        ],
      ),
    );

    return Container(
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          color: Colors.white,
          borderRadius: BorderRadius.circular(8.w),
          boxShadow: [
            BoxShadow(
              offset: Offset(2, 1),
              color: Colors.black12,
              blurRadius: 12.w,
            ),
          ]),
      margin: EdgeInsets.symmetric(
          horizontal: (ScreenUtils.screenWidth * 0.1 / 6).w),
      padding: EdgeInsets.all(16.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          header,
          content,
          footer,
        ],
      ),
      // width: MediaQuery.of(context).size.width - 40.0,
    );
  }
}
